<template>
  <div class="bigbox">
    <div class="topbox">
        <div>
          <template>
            <el-select v-model="form.region" clearable   placeholder="通讯规约" @change="changefenlei"  size="medium" style="margin-right: 10px;">
              <el-option class="select" v-for="(item,index) in guiyuelist" :key="index" :label="item.text" :value="item.value"></el-option>
            </el-select>
            <el-input  size="medium" @keyup.enter.native="changeinput" style="width: 300px;height: 32px;"
             v-model="input"  suffix-icon="el-icon-search" placeholder="请输入检索关键字"></el-input>
          </template>
        </div>
        <div><button class="button" @click="dialogVisible=true" style=" cursor: pointer;">新增</button></div>
      </div>
      <div class="tablebox">
        <template>
          <el-table
            :data="data"
            highlight-current-row
            :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
            border
            height="calc(100% - 1px)"
            style="width: 100%">
            <el-table-column
              prop="channelTag"
              label="通道标识"
              >
            </el-table-column>
            <el-table-column
              prop="channelName"
              label="通道名称"
              >
            </el-table-column>
            <el-table-column
              prop="channelExplain"
              label="通道描述">
            </el-table-column>
            <el-table-column
              prop="channelProtocol"
              label="通道规约"
              >
              <template #default="{row}">
                <span>
                  {{ guiyuelist.filter(ele=>ele.value==row.channelProtocol)[0].text }}
            </span>
            </template>
            </el-table-column>
            <el-table-column
              prop="channelExplain"
              label="操作"
              align="center">
              <template #default="{row}">
              <span @click="xiugai(row)">
                <i
                  class="el-icon-edit"
                  style="color: skyblue; margin-left: 30px; cursor: pointer;"
                ></i
              ></span>
              <span @click="dellist(row)">
                <i
                  class="el-icon-delete"
                  style="color: red; margin-left: 30px; cursor: pointer;"
                ></i
              ></span>
            </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div>
        <el-dialog
            :title="isshow ?'物联通道编辑':'物联通道新增'"
            :visible.sync="dialogVisible"
            width="30%"
            :showClose="false"
            >
            <div>
              <el-form :model="formdata"  label-width="140px" :rules="rules" ref="refform">
                <el-form-item label="通讯规约:" prop="channelProtocol">
                  <el-select v-model="formdata.channelProtocol" placeholder="请选择通讯规约" style="width: 250px;" size="mini">
                    <el-option class="select" v-for="(item,index) in guiyuelist" :key="index" :label="item.text" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="通道标识:" prop="channelTag" size="80" >
              <el-input v-model="formdata.channelTag" style="width: 250px;" size="mini" ></el-input>
            </el-form-item>
            <el-form-item label="通道名称:" prop="channelName">
              <el-input v-model="formdata.channelName" style="width: 250px;" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="通道描述:" prop="channelExplain">
              <el-input type="textarea" v-model="formdata.channelExplain" style="width: 250px;" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="通道配置:" prop="channelConfig">
              <el-input type="textarea" :rows="4" v-model="formdata.channelConfig" style="width: 250px;" size="mini"></el-input>
            </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="margin-right: 60px;">
              <button class="dialogbutton sure" type="primary" @click="submit" style=" cursor: pointer;">确 定</button>
              <button class="dialogbutton" @click="quxiao" style=" cursor: pointer;">取 消</button>
            </span>
          </el-dialog>
      </div>
  </div>
</template>

<script>
import { getguiyuexialaapi, getguiyuelistapi, postwulianapi, putwulianapi, deldangelistapi } from '../../api/gather.js'
// import TableSelf from '../../components/table/index'
export default {
  name: 'MaintenanceIndex',
  components: {
    // TableSelf
  },
  data () {
    return {
      dialogVisible: false,
      formdata: {},
      input: '',
      val: '',
      form: {},
      data: [],
      guiyuelist: [],
      rules: {
        channelProtocol: [
          { required: true, message: '请选择通讯规约', trigger: 'blur' }
        ],
        channelTag: [
          { required: true, message: '通道标识必填', trigger: 'blur' }
        ],
        channelName: [
          { required: true, message: '通道名称必填', trigger: 'blur' }
        ],
        channelExplain: [
          { required: true, message: '通道描述必填', trigger: 'blur' }
        ],
        channelConfig: [
          { required: true, message: '通道配置必填', trigger: 'blur' }
        ]
      },
      isshow:false
    }
  },

  async mounted () {
    const res = await getguiyuexialaapi()
    this.guiyuelist = res.data.list
    this.getguiyuelist()
    console.log(JSON.parse(
      "{\"Port\":\"2404\",\"K\":\"12\",\"CotLen\":\"2\",\"GenIntInterval\":\"0\",\"CommAddressLen\":\"2\",\"InfoAddressLen\":\"3\",\"SendGenIntWhenConnected\":\"0\",\"W\":\"8\",\"T1\":\"15\",\"SynchTimeInterval\":\"0\",\"T2\":\"10\",\"SendGenIntWhenASDU70\":\"0\",\"T3\":\"20\"}"));
    
  },

  methods: {
    changefenlei (val) {
      this.val = val
      this.getguiyuelist(val)
    },
    async getguiyuelist (val) {
      const res = await getguiyuelistapi({ channelProtocol: val })
      this.data = res.data.list
    },
    changeinput () {
      this.data = this.data.filter(ele => ele.channelName.indexOf(this.input) !== -1)
    },
    async submit() {
      await this.$refs.refform.validate()
      this.isshow ?  putwulianapi(this.formdata).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'修改成功':res.message
        })
      }) :  postwulianapi(this.formdata).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'新增成功':res.message
        })
      })
      this.formdata = {}
      this.dialogVisible = false
      this.isshow=false
      this.getguiyuelist()
    },
    async xiugai (row) {
      this.dialogVisible = true
      this.isshow = true
      const { channelExplain, channelProtocol, channelName, channelTag,channelConfig } = row
      this.$set(this.formdata, 'channelExplain', channelExplain)
      this.$set(this.formdata, 'channelProtocol', channelProtocol)
      this.$set(this.formdata, 'channelName', channelName)
      this.$set(this.formdata, 'channelTag', channelTag)
      this.$set(this.formdata, 'channelConfig',channelConfig )
    },
    quxiao () {
      this.formdata = {}
      this.isshow=false
      this.dialogVisible = false
    },
    dellist (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deldangelistapi({ channelTag: row.channelTag })
        if (res.code === 200) {
          this.$message.success('删除成功')
        }
        this.getguiyuelist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  watch: {
    input (val) {
      if (!val) {
        this.getguiyuelist(this.val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.tablebox{
  background-color: #fff;
padding: 10px;
height: calc(100% - 90px);
}
.bigbox{
  padding: 10px;
  background-color: #f1f1f1;
  height: 100%;
}
.select{
  padding-left: 10px;
}
.topbox{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 20px;
  height: 80px;
  background-color: #fff;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  border: 1px solid #ccc;
  background-color: #1890ff;
}
.dialogbutton{
  width: 63px;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 7px;
  background-color: #fff;
}
.sure{
  background-color: #1890ff;
  color: #fff;
  margin-right: 10px;
}
::v-deep .el-textarea__inner{
  margin-bottom: 10px;
}
</style>
